<template>
  <div class="NotForSaleEdit">
    <div class="NotForSaleEdit-one borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>基本信息</div>
      </div>
      <div class="NotForSaleEdit-one-content">
        <div>
          <div class="star">方案名称：</div>
          <el-input
            v-model="form.programme_title"
            placeholder="请输入方案名称"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="star">服装类别：</div>
          <el-select
            filterable
            style="width: 400px"
            v-model="basecodeobj"
            placeholder="请选择服装类别"
            value-key="id"
            @change="changeBaseCode"
          >
            <el-option
              v-for="item in basecode"
              :key="item.id"
              :label="item.base_category"
              :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="NotForSaleEdit-one borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>部位信息</div>
        <i
          class="el-icon-circle-plus-outline pointer"
          style="color: #409eff; font-size: 24px; margin-left: 10px"
          @click="dialogVisible = true"
        ></i>
      </div>
      <div class="NotForSaleEdit-one-content">
        <div v-for="(item, index) in form.position_data" :key="item.id">
          <div class="star">部位{{ index + 1 }}：</div>
          <div>
            <el-input
              v-model="item.position_title"
              placeholder="部位名称"
              size="normal"
              clearable
              disabled
            ></el-input>
            <div style="margin: 0 10px">-</div>
            <el-input
              v-model="item.position_method"
              placeholder="测量方法"
              size="normal"
              clearable
            ></el-input>
          </div>
          <el-button
            style="margin-left: 10px"
            type="text"
            size="default"
            @click="onEdit(item, index)"
            >编辑</el-button
          >
          <el-button
            type="text"
            style="color: red"
            size="default"
            @click="onDel(index)"
            >删除</el-button
          >
        </div>
      </div>
    </div>
    <div>
      <el-button
        type="primary"
        size="default"
        @click="onSave"
        :disabled="
          !form.programme_title ||
          !form.base_category_id ||
          !form.base_category_id ||
          !form.base_category ||
          !form.position_data.length
        "
        :loading="loading"
        >保 存</el-button
      >
    </div>
    <el-dialog
      title="部位信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <el-select
        filterable
          style="width: 300px"
          v-model="positionobj"
          value-key="id"
          placeholder="请选择"
        >
          <el-option
            v-for="item in position"
            :key="item.id"
            :label="item.position_title"
            :value="item"
          ></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm()"
          :loading="loading"
          :disabled="!positionobj"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminOperateSetProgramme,
  postAdminOperateLookProgramme,
  postAdminOperateGetBasecode,
  postAdminOperateGetPosition,
} from "@/api";
export default {
  data() {
    return {
      loading: false,
      basecode: [],
      position: [],
      dialogVisible: false,
      basecodeobj: "",
      positionobj: "",
      index: "",
      form: {
        programme_title: "",
        position_data: [],
        base_category_id: "",
        base_category: "",
      },
    };
  },
  async mounted() {
    await this.postAdminOperateGetBasecode();
    await this.postAdminOperateGetPosition();
    if (this.$route.query.id) {
      this.postAdminOperateLookProgramme(this.$route.query.id);
    }
  },
  methods: {
    postAdminOperateLookProgramme(id){
      postAdminOperateLookProgramme({id}).then(res=>{
        let data = res.data
        this.form = {
          id:data.id,
          programme_title:data.programme_title,
          position_data:data.position_data,
          base_category_id:data.base_category_id,
          base_category:data.base_category
        }
        this.basecodeobj = {
          base_category:data.base_category,
          id:data.base_category_id
        }
      })
    },
    handleClose() {
      this.positionobj = "";
      this.index = "";
      this.dialogVisible = false;
    },
    changeBaseCode(e) {
      this.basecodeobj = e;
      this.form.base_category_id = e.id;
      this.form.base_category = e.base_category;
    },
    submitForm() {
      let { positionobj, form, index } = this;
      console.log("positionobj", positionobj);
      let obj = {
        id: positionobj.id,
        position_title: positionobj.position_title,
        position_method: positionobj.position_method,
      };
      console.log("obj", obj);
      if (typeof index == "string") {
        form.position_data.push(obj);
      } else {
        form.position_data.splice(positionobj.index, 1, obj);
      }
      this.form = form;
      this.handleClose();
    },
    onDel(index) {
      let { form } = this;
      form.position_data.splice(index, 1);
      this.form = form;
    },
    onEdit(e, index) {
      this.index = index;
      this.positionobj = JSON.parse(JSON.stringify(e));
      this.dialogVisible = true;
    },
    // 基码列表
    postAdminOperateGetBasecode() {
      let obj = {
        page: 1,
        size: 10000,
      };
      postAdminOperateGetBasecode(obj).then((res) => {
        let data = res.data
        let datas = data.filter(e=>{
          return e.base_status == 1
        })
        this.basecode = datas;
      });
    },
    // 部位列表
    postAdminOperateGetPosition() {
      let obj = {
        page: 1,
        size: 10000,
      };
      postAdminOperateGetPosition(obj).then((res) => {
        let data = res.data
        let datas = data.filter(e=>{
          return e.position_status == 1
        })
        this.position = datas;
      });
    },
    async onSave() {
      this.loading = true;
      let { form } = this;
      try {
        await postAdminOperateSetProgramme(form);
        this.$message.success("保存成功");
        setTimeout(() => {
          this.loading = false;
          this.$router.go(-1);
        }, 1000);
      } catch (error) {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.borderbottom {
  border-bottom: 1px solid #efefef;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.NotForSaleEdit {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  .NotForSaleEdit-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    padding-bottom: 20px;
    > div:nth-child(1) {
      width: 4px;
      height: 26px;
      border-radius: 4px;
      background: #409eff;
      margin-right: 10px;
    }
  }
  .NotForSaleEdit-one {
    .NotForSaleEdit-one-content {
      > div {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        > div:nth-child(1) {
          width: 140px;
          text-align: right;
          margin-right: 10px;
        }
        > .el-input {
          width: 400px;
        }
        > div:nth-child(2) {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .NotForSaleEdit-two {
    .NotForSaleEdit-two-content {
      display: flex;
      flex-wrap: wrap;
      > div {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        > div:nth-child(1) {
          width: 140px;
          text-align: right;
          margin-right: 10px;
        }
        /deep/ .el-input {
          width: 400px;
        }
      }
    }
  }
}
</style>